<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>通知列表</title>
<link rel="stylesheet"  href="css/notices.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- 通知信息列表 -->
<ul class="notice-list">
	<li>
    	<a href="notice-detail.html">
            <span class="title">系统通知</span><span class="status">[未读]</span>
            <span class="contents">通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容通知内容</span>
            <span class="date">2018-08-01</span>
        </a>
    </li>
	<li>
    	<a href="notice-detail.html">
            <span class="title">系统通知</span><span class="status">[未读]</span>
            <span class="contents">关于那啥啥啥的一系列乱七八糟的问题</span>
            <span class="date">2018-08-01</span>
        </a>
    </li>
	<li>
    	<a href="notice-detail.html">
            <span class="title">系统通知</span><span class="status">[未读]</span>
            <span class="contents">关于那啥啥啥的一系列乱七八糟的问题</span>
            <span class="date">2018-08-01</span>
        </a>
    </li>
</ul>
<script>
$(".notice-list li").click(function(){$(this).addClass("readed").children($(".readed .status").text("[已读]"))})
</script>
</body>
</html>
